<template>
  <div class="adv">
    <div v-if="type == 1" :id="value"></div>
    <div
      class="self-adv"
      v-if="imageshow && type == 2"
      style="position:relative"
    >
      <img class="article-ad" :src="value" @click.stop="tolink" />
      <img
        class="article-close"
        src="../../public/img/icons/icon-clear.png"
        @click="imagehide"
      />
    </div>
    <div v-if="type == 3" id="video" class="article-ad"></div>
    <slot></slot>
    <div class="adv-title" v-if="advtitle && showtitle == 1">
      {{ advtitle }}
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Sence from '../sence/Sence';

@Component
export default class Head extends Sence {
  @Prop() public value!: any;
  @Prop() public type!: any;
  @Prop() public advurl!: any;
  @Prop() public advcover!: any;
  @Prop() public advtitle!: string;
  @Prop() public showtitle!: any;

  public imageshow: boolean = true; //图片显示

  public mounted(): void {
    const that = this;
    if (this.type == 1) {
      let sogou_div: any = document.getElementById(this.value);
      (window as any).sogou_un = (window as any).sogou_un || [];
      (window as any).sogou_un.push({
        id: '1111892',
        ele: sogou_div,
        w: 20,
        h: 5,
      });
    } else if (this.type == 2) {
    } else if (this.type == 3) {
      let videoObject = {
        container: '#video', //“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
        flashplayer: false, //如果强制使用flashplayer则设置成true
        video: that.value, //视频地址
        poster: that.advcover, //封面图片
        doubleClick: false, //双击全屏
      };
      // @ts-ignore
      let player = new ckplayer(videoObject);
      var attribute = {
        list: [
          //list=定义元素列表
          {
            type: 'text', //说明是文本
            text: '查看详情', //文本内容
            color: '0xFFFFFF', //文本颜色
            size: 14, //文本字体大小，单位：px
            font: '"Microsoft YaHei", YaHei, "微软雅黑",', //字体
            leading: 30, //文字行距
            alpha: 1, //文本透明度(0-1)
            paddingLeft: 10, //文本内左边距离
            paddingRight: 10, //文本内右边距离
            paddingTop: 0, //文本内上边的距离
            paddingBottom: 0, //文本内下边的距离
            marginLeft: 0, //文本离左边的距离
            marginRight: 10, //文本离右边的距离
            marginTop: 10, //文本离上边的距离
            marginBottom: 30, //文本离下边的距离
            backgroundColor: '0xFF0000', //文本的背景颜色
            backAlpha: 0.5, //文本的背景透明度(0-1)
            backRadius: 30, //文本的背景圆角弧度
            clickEvent: `link->${that.advurl}`,
          },
        ],
        // x: 300, //元件x轴坐标，注意，如果定义了position就没有必要定义x,y的值了，支持数字和百分比
        // y: 300, //元件y轴坐标
        position: [2, 0], //位置[x轴对齐方式（0=左，1=中，2=右），y轴对齐方式（0=上，1=中，2=下）
        alpha: 1, //元件的透明度
        backgroundColor: '', //元件的背景色
        backAlpha: 1, //元件的背景透明度(0-1)
        backRadius: 60, //元件的背景圆角弧度
        clickEvent: 'actionScript->videoPlay',
      };
      let elementTemp = player.addElement(attribute);
    }
  }
  public aaa(): void {
    console.log(111);
  }

  public tolink(): void {
    window.location.href = this.advurl;
  }

  public imagehide(): void {
    this.imageshow = false;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.adv, .article-ad {
  width: 100vw;
  height: auto;
  position: relative;
  overflow: hidden;
}

.article-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 50px;
  z-index: 300;
}

.self-adv {
  position: relative;
}

.adv-title {
  height: 50px;
  line-height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 250;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 14px;
  text-align: left;
  padding: 0 15px;
}
</style>
